<template>
  <div class="map-wrap">
    <Map v-if="showMap" mapInstance="$map" :mapConfig="mapConfig"></Map>
    <div class="map-tool">
      <span v-for="(item, index) in mapTools" @click="mapToolAction(item.type)" :key="index">{{item.label}}</span>
    </div>
    <div class="shot-img" v-show="shotDataUrl">
      <img :src="shotDataUrl" alt="">
    </div>
    <Swipe ref="Swipe"></Swipe>
  </div>
</template>

<script>
import axios from 'axios';
import moment from "moment";
import Map from "../ol/Map.vue";
import Swipe from "./components/Swipe.vue";
import mapConfig from "../ol/mapConfig.js";
import { getWindFilePath } from "../utils/common.js";
export default {
  components: {
    Map, Swipe
  },
  data () {
    return {
      mapConfig,
      showMap: true,
      mapTools: [
        { type: "destroy", label: "销毁地图" },
        { type: "getStyle", label: "添加样式" },
        { type: "getStripeStyle", label: "添加条纹样式" },
        { type: "overlay", label: "添加overlay" },
        { type: "startSwipe", label: "开启卷帘" },
        { type: "closeSwipe", label: "关闭卷帘" },
        { type: "featureOnSelect", label: "点选" },
        { type: "startModify", label: "要素编辑" },
        { type: "createHeatmapLayer", label: "热力图|聚合图" },
        { type: "takeScreenShot", label: "屏幕截图" },
        { type: "createLayer", label: "创建图层" },
        { type: "createWindLayer", label: "添加风场图层" },
      ],
      imgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      shotDataUrl: ""
    }
  },
  mounted () {
    this.initMap();
  },
  methods: {
    initMap() {
      console.log('log--- this.$map', this.$map);
      this.editLayer = this.$map.createGraphicsLayer();
      this.testLayer = this.$map.createGraphicsLayer();
      let geojson = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                112.460444288,
                                33.907686819,
                                1232.145970932
                            ],
                            [
                                112.578570215,
                                32.884733244,
                                118.041431004
                            ],
                            [
                                112.84813636,
                                32.954251513,
                                253.10017427
                            ],
                            [
                                112.965862058,
                                33.561420995,
                                361.939694713
                            ],
                            [
                                112.460444288,
                                33.907686819,
                                1232.145970932
                            ]
                        ]
                    ]
                },
                "properties": {
                    "id": "1578990151331418114",
                    "electronicFenceName": "33",
                    "electronicFenceInfo": "",
                    "electronicFenceType": 0,
                    "geom": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    112.46044428843578,
                                    33.907686819351774,
                                    1232.1459709324402
                                ],
                                [
                                    112.57857021469471,
                                    32.88473324352071,
                                    118.04143100446383
                                ],
                                [
                                    112.84813636010476,
                                    32.954251512601424,
                                    253.10017426958703
                                ],
                                [
                                    112.96586205755248,
                                    33.56142099469116,
                                    361.9396947131421
                                ],
                                [
                                    112.46044428843578,
                                    33.907686819351774,
                                    1232.1459709324402
                                ]
                            ]
                        ]
                    },
                    "tenantId": "D49D1D87269943E5BB10CEC82DA81802",
                    "creator": 1566673571964731400,
                    "createDate": "2022-10-09T14:06:02.952"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                113.548802024,
                                33.933285747,
                                210.194014795
                            ],
                            [
                                113.216076025,
                                33.338445088,
                                68.264508629
                            ],
                            [
                                113.564407189,
                                33.163623493,
                                0.10000047
                            ],
                            [
                                113.712487122,
                                33.429599787,
                                0.100000474
                            ],
                            [
                                113.548802024,
                                33.933285747,
                                210.194014795
                            ]
                        ]
                    ]
                },
                "properties": {
                    "id": "1578990174559473666",
                    "electronicFenceName": "44",
                    "electronicFenceInfo": "",
                    "electronicFenceType": 0,
                    "geom": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    113.548802023639,
                                    33.93328574656965,
                                    210.19401479469173
                                ],
                                [
                                    113.21607602509593,
                                    33.338445088423484,
                                    68.26450862850719
                                ],
                                [
                                    113.5644071886072,
                                    33.16362349338773,
                                    0.100000470309426
                                ],
                                [
                                    113.71248712244576,
                                    33.42959978701568,
                                    0.100000474320421
                                ],
                                [
                                    113.548802023639,
                                    33.93328574656965,
                                    210.19401479469173
                                ]
                            ]
                        ]
                    },
                    "tenantId": "D49D1D87269943E5BB10CEC82DA81802",
                    "creator": 1566673571964731400,
                    "createDate": "2022-10-09T14:06:08.491"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                113.375770216,
                                31.803150465,
                                486.397130907
                            ],
                            [
                                113.753710352,
                                31.410426352,
                                0.100000446
                            ],
                            [
                                113.964312535,
                                31.853668197,
                                68.483769718
                            ],
                            [
                                113.375770216,
                                31.803150465,
                                486.397130907
                            ]
                        ]
                    ]
                },
                "properties": {
                    "id": "1578990196311134210",
                    "electronicFenceName": "55",
                    "electronicFenceInfo": "",
                    "electronicFenceType": 0,
                    "geom": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    113.37577021590133,
                                    31.803150464814443,
                                    486.3971309065147
                                ],
                                [
                                    113.75371035243712,
                                    31.41042635162776,
                                    0.10000044575882
                                ],
                                [
                                    113.96431253541117,
                                    31.85366819708376,
                                    68.48376971844382
                                ],
                                [
                                    113.37577021590133,
                                    31.803150464814443,
                                    486.3971309065147
                                ]
                            ]
                        ]
                    },
                    "tenantId": "D49D1D87269943E5BB10CEC82DA81802",
                    "creator": 1566673571964731400,
                    "createDate": "2022-10-09T14:06:13.677"
                }
            },
        ]
      };
      let features = this.$map.jsonToFeatures(geojson);
      features.forEach(item => {
        let style = this.$map.getPolygonStyle({
          color: [255, 255, 0, 0.1], 
          outLineColor: "#ffff00",
          outLineWidth: 3
        });
        this.$map.setFeatureStyle(item, style);
      });
      this.$map.addFeatureToLayer(this.editLayer, features);
      // 添加本地xyz切片数据
      // let tileLayer = this.$map.createBaseLayer({
      //   // url: "http://localhost:8080/tileXYZ/{z}/{x}/{y}.png",
      //   url: "http://223.95.160.68:9000/over-the-horizon/map-image/haichaocun-saier/{z}/{x}/{y}.png",
      //   id: "XYZ",
      //   layerType: "XYZ",
      // });
      // console.log('log--- tileLayer', tileLayer);
    },
    mapToolAction(type) {
      if(type === "destroy") {
        this.showMap = false;
        // this.$map.destroy();
      }
      if(type === "getStyle") {
        // let geometry = this.$map.createPoint(114, 34);
        let geometry = this.$map.createPolyline([[114, 34], [114, 35], [115, 34.2], [115, 34]]);
        // let geometry = this.$map.createPolygon([[[114, 35.8], [114, 34], [115, 34], [115, 35.8], [114, 35.8]]]);
        let style = this.$map.getStyle({
          point: {
            size: 200
          },
          text: {
            value: "测试标注",
            fontSize: 20,
            extra: {
              backgroundFill: this.$map.getFillStyle("#00ffff"),
              backgroundStroke: this.$map.getStrokeStyle({
                color: "#0000ff",
                width: 2
              }),
              padding: [10, 10, 10, 10]
            }
          },
          fill: {
            color: "#ff0000"
          },
          outline: {
            color: "#ffff00",
            width: 2
          }
        }); 
        console.log('log--- style', style);
        let buffer = this.$map.createBuffer(geometry, 5000);
        let feature = this.$map.createFeature(buffer, style);
        this.$map.addFeatureToLayer(this.testLayer, feature);
      }
      if(type === "getStripeStyle") {
        let geometry = this.$map.createPolyline([[114, 34], [114, 35], [115, 34.2], [115, 34]]);
        let feature = this.$map.createFeature(geometry);
        feature.setStyle(this.$map.getStripeStyle({
          lineColor: "#089519",
          lineWidth: 6
        }));
        this.$map.addFeatureToLayer(this.testLayer, feature);
      }
      if(type === "overlay") {
        let el = document.createElement("div");
        el.className = "overlay_animation";
        this.$map.createOverlay({
          el: el,
          position: [111.201624, 34.362580]
        });

        // 生成多个并添加点击事件
        let srcList = [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ];
        srcList.forEach((item, index) => {
          let el = document.createElement("div");
          el.className = "image-wrap";
          el.addEventListener("click", evt => {
            window.open(item)
          });
          let html = `
            <img class="image" src="${item}" />
          `
          el.innerHTML = html;
          this.$map.createOverlay({
            el: el,
            position: [111.201624 + index * 2, 34.362580]
          });
        });
        this.$map.createOverlay({
          el: this.$refs.image,
          position: [111.201624, 34.362580]
        });
      }
      if(type === "startSwipe") {
        let layers = this.$map.map.getLayers().getArray();
        let swipeLayers = [];
        swipeLayers.push({
          layer: layers[0],
          side: "right"
        });
        swipeLayers.push({
          layer: layers[1],
          side: "left"
        });
        this.$map.startSwipe(swipeLayers); //使用默认的dom
        // this.$map.startSwipe(swipeLayers, this.$refs.Swipe.$el); //使用传入的dom
      }
      if(type === "closeSwipe") {
        this.$map.closeSwipe();
      }
      if(type === "featureOnSelect") {
        this.$map.featureOnSelect(evt => {
          console.log('log--- evt', evt);
        });
      }
      if(type === "startModify") {
        let editFeature = this.$map.getFeatureFromLayer(this.editLayer, "id", "1578990151331418114");
        let style = this.$map.getPolygonStyle({
          color: [0, 255, 255, 0.1], 
          outLineColor: "#00ffff",
          outLineWidth: 3
        });
        this.$map.setFeatureStyle(editFeature, style);
        this.$map.startModify(editFeature, evt => {
          console.log('log--- evt', evt);
        });
      }
      if(type === "createHeatmapLayer") {
        let heatData = {
          type: "FeatureCollection",
          features: [
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 149.042007, -35.349998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -71.660004, -35.423000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.315994, -35.721001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -64.288002, -36.627998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -73.055000, -36.826000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.761002, -36.903999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 176.154999, -37.700001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 175.272995, -37.776001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 145.075104, -37.852959 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 178.016006, -38.659000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -62.274067, -38.725273 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.575996, -38.729000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.283333, -38.944908 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.078003, -39.070000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 176.841003, -39.639999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 175.035004, -39.930000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -62.995026, -40.815025 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 173.248001, -41.297001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.952003, -41.474998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 171.207001, -42.472000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 147.291000, -42.851002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -65.099998, -43.299999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 172.638000, -43.523998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.702003, -45.402000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -67.500000, -45.830002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 170.473999, -45.883999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 168.373001, -46.412998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -69.228996, -51.625000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -57.848999, -51.701000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -70.934654, -53.166161 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.297997, -54.792000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 129.054993, 35.158001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.331871, 42.707264 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -15.598000, 11.864000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 147.147949, -9.497187 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -74.080513, 4.630220 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 12.550000, 55.720001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 103.831787, 1.268858 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 126.935249, 37.542351 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 16.320986, 48.202118 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -58.449841, -34.622501 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 4.368000, 50.837002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 96.826080, -12.157536 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.973783, 43.282158 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 126.907997, 35.153000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 128.591003, 35.863998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.310997, 5.364000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 165.500000, -21.500000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 166.916702, -0.516700 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 51.448002, 35.773998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 49.700001, 34.083332 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -5.316700, 35.883301 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 130.933304, 33.950001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 136.761993, 35.410000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 77.216751, 28.568726 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.225220, 31.773746 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 17.934000, 62.633999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 15.638000, 58.402000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 14.178000, 57.785999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 44.233002, 46.266998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 90.374001, 22.702999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 159.983002, 59.083000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 114.532997, 51.167000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 104.699997, 52.833000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.282997, 64.333000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 86.217003, 69.449997 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 69.000000, 61.016998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 54.667000, 59.016998 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 53.033001, 67.616997 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 44.783001, 43.233002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 132.899994, 48.817001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.333000, 61.783001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 32.000000, 63.000000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.708000, 70.677002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -53.553001, 69.244003 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -133.705994, 68.365997 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 64.040001, 67.504997 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -21.895000, 64.135002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -149.897995, 61.202999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -66.810997, 54.800999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -130.309998, 54.320999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.971000, 53.423000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 22.311001, 48.622002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.123001, 46.692001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -66.068001, 45.264000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 38.960999, 45.036999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.104000, 44.962002 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 42.063000, 44.282001 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 71.371002, 42.889000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 109.807999, 40.659000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.653000, 37.944000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 39.173000, 21.542999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -96.123001, 19.184999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 42.507999, 18.219999 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -15.978000, 18.084000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 74.843002, 12.869000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -10.797000, 6.301000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 7.068000, 6.215000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 9.454000, 0.391000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 15.299000, -4.321000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.743999, -4.817000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -77.044998, -12.082000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -57.283001, -25.406000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -71.332001, -29.959000 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 46.659145, 61.259964 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.807220, -41.334835 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 86.599289, 67.493851 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 177.480255, 64.755272 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 17.991455, 59.331165 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 76.280418, 9.970155 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -60.281559, 53.295090 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.674783, 42.850159 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.541466, 63.755356 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 51.141739, 43.690456 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 20.412556, 44.799683 ] } },
            { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 19.400000, 42.500000 ] } }
          ]
        };
        let features = this.$map.jsonToFeatures(heatData);
        // this.$map.createHeatmapLayer({
        //   features,
        //   radius: 20,
        //   blur: 10,
        // });
        this.$map.createClusterLayer({
          features,
          distance: 100,
          image: {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          }
        });
      }
      if(type === "takeScreenShot") {
        let feature = this.$map.getFeatureFromLayer(this.editLayer, "id", "1578990151331418114");
        this.$map.takeScreenShot({
          extent: feature.getGeometry().getExtent(),
          padding: 10,
          callback: (data) => {
            console.log('log--- data', data);
            this.shotDataUrl = data;
          }
        });
      }
      if(type === "createLayer") {
        let layer = this.$map.createBaseLayer({//遥感院河南省影像数据
          url: 'https://www.ygserver.org.cn/iserver/services/map-agscache-HNSDOM2022M12080/wmts-china',
          id: "image1",
          layerType: "WMTS",
          maxResolution: 0.703125,
          layer: "HNS_DOM_2022M12_080",
          matrixSet: "ChinaPublicServices_HNS_DOM_2022M12_080",
          level: {
            min: 0,
            max: 19
          },
          // visible: true
        });
        console.log('log--- layer', layer);
      }
      if(type === "createWindLayer") {
        if(this.windLayer) {
          this.$map.removeMapEvent(this.windLayer.viewScaleEvent);
          this.$map.removeLayer(this.windLayer);
        }
        // let fileUrl = "https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json";
        let fileUrl = "http://117.159.13.207:8203/grib2json/data" + getWindFilePath(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), "json");
        axios.get(fileUrl).then(({data: res}) => {
          console.log('log--- res', res);
          this.windLayer = this.$map.createWindLayer(res);
          console.log('log--- this.windLayer', this.windLayer);
        });
      }
    }
  }
}
</script>
<style>
@keyframes myfirst{ 
  to{ 
    transform: scale(1);
    opacity: 0;
    pointer-events: none;
  } 
} 
.overlay_animation { 
  height: 100px; 
  width: 100px; 
  border-radius: 50%; 
  background: rgba(255, 0, 0, 0.9); 
  pointer-events: none;
  transform: scale(0); 
  animation: myfirst 1s linear; 
  animation-iteration-count: infinite; 
}
.image-wrap {
  width: 200px;
  border: 5px solid #fff;
}
.image-wrap img {
  width: 100%;
}
</style>
<style scoped>
.map-wrap {
  height: 100%;
  position: relative;
}
.map-tool {
  position: absolute;
  left: 0;
  top: 0;
}
.map-tool span {
  display: inline-block;
  margin: 3px;
  padding: 3px 5px;
  border: 1px solid #333;
  background-color: #eee;
  border-radius: 3px;
  cursor: pointer;
}
.shot-img {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 0;
  border: 1px solid #0000ff;
}
</style>